<template>
  <div class="app-container">
    <div class="table_box">
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
        <el-form-item v-for="(item,index) in col" :key="index" :label="`${item.title}：`" :prop="item.prop">
          <el-select v-if="item.type==='select'" v-model="queryParams[item.prop]" :placeholder="item.placeholder" clearable size="mini" style="width: 150px">
            <el-option v-for="item in item.options" :key="item.value" :value="item.value" :label="item.label"></el-option>
          </el-select>
          <el-input v-if="item.type==='input'" v-model="queryParams[item.prop]" :placeholder="item.placeholder" clearable size="mini" style="width: 150px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleCommand('handleAdd')" v-hasPermi="['project:rooms:add']">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleCommand('handleUpdate')" v-hasPermi="['project:rooms:edit']">修改</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['project:rooms:remove']">删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" plain icon="el-icon-download" size="mini" :loading="exportLoading" @click="handleExport" v-hasPermi="['project:rooms:export']">导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <el-table v-loading="loading" :data="roomsList" @selection-change="handleSelectionChange" size="mini">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column label="地址" align="center" prop="address" />
        <el-table-column label="产别" align="center" prop="cb">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.bus_cb_type" :value="scope.row.cb" />
          </template>
        </el-table-column>
        <el-table-column label="使用面积" align="center" prop="symj" />
        <el-table-column label="建筑面积" align="center" prop="jzmj" />
        <el-table-column label="房间数" align="center" prop="fjs" />
        <el-table-column label="朝向" align="center" prop="direction">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.pm_room_direction_type" :value="scope.row.direction" />
          </template>
        </el-table-column>
        <el-table-column label="是否带卫生间" align="center" prop="isWsj">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.isWsj" />
          </template>
        </el-table-column>
        <el-table-column label="是否带厨房" align="center" prop="isChf">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.isChf" />
          </template>
        </el-table-column>
        <el-table-column label="房间编号" align="center" prop="roomNo" />
        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="家具家电情况" align="center" prop="jujd" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px">
          <template slot-scope="scope">
            <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleCommand('handleLook',scope.row)" v-hasPermi="['project:rooms:look']">查看</el-button> -->
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleCommand('handleUpdate',scope.row)" v-hasPermi="['project:rooms:edit']">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleCommand('handleDelete',scope.row)" v-hasPermi="['project:rooms:remove']">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
    <!-- <div id="mapDiv">
      地图信息展示弹窗
      <Popup ref="popup" />
    </div> -->
    <!-- 修改弹窗 -->
    <Edit ref="edit" />
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from 'ol/layer/Tile';
import Projection from 'ol/proj/Projection';
import * as olControl from 'ol/control';
import proj4 from 'proj4';
import { register } from 'ol/proj/proj4';
import TileGrid from 'ol/tilegrid/TileGrid';
import XYZ from 'ol/source/XYZ';
import GeoJSON from 'ol/format/GeoJSON';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import { Stroke, Style, Fill } from 'ol/style';
import { fromLonLat, toLonLat } from 'ol/proj';
import epsg9900 from '../../../../utils/epsgParams';
import Popup from './handle/popup.vue'
import Edit from './handle/edit.vue'
import { listRooms, delRooms, exportRooms } from "../../../../api/business/project/rooms";
export default {
  name: "housing",
  components: { Popup, Edit },
  dicts: ['bus_cb_type', 'pm_room_direction_type', 'sys_yes_no', 'sys_yes_no'],
  data() {
    return {
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      showSearch: true,
      roomsList: [],
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        address: null,
        cb: null,
        symj: null,
        jzmj: null,
        direction: null,
        isWsj: null,
        isChf: null,
        jujd: null
      },
      total: 0,
      col: [{ title: '产别', prop: 'cb', type: 'select', placeholder: '请选择产别', options: [{ label: "I级", value: '0' }], show: true, disabled: false },
      { title: '使用面积', prop: 'symj', type: 'input', placeholder: '请输入使用面积', options: [], show: true, disabled: false },
      { title: '建筑面积', prop: 'jzmj', type: 'input', placeholder: '请输入建筑面积', options: [], show: true, disabled: false },
      { title: '朝向', prop: 'direction', type: 'select', placeholder: '请选择朝向', options: [], show: true, disabled: false },
      { title: '是否带卫生间', prop: 'isWsj', type: 'select', placeholder: '请选择是否带卫生间', options: [], show: true, disabled: false, other: true },
      { title: '是否带厨房', prop: 'isChf', type: 'select', placeholder: '请选择是否带厨房', options: [], show: true, disabled: false, other: true },
      ],
      map: null,
    }
  },
  computed: {
    opened() {
      return this.$store.state.app.sidebar.opened
    }
  },
  watch: {
    opened() {
      this.updateMapView();
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    this.initMap()
    this.getoptions()
  },
  methods: {
    /**获取对应字典值 */
    getoptions() {
      this.col.forEach(element => {
        console.log(this.dict.type.bus_cb_type)
        element.prop === 'cb' ? element.options = this.dict.type.bus_cb_type : []
        element.prop === 'direction' ? element.options = this.dict.type.pm_room_direction_type : []
        element.other ? element.options = this.dict.type.sys_yes_no : []
      });
    },
    /** 查询工程管理系统-房屋信息列表 */
    getList() {
      this.loading = true;
      listRooms(this.queryParams).then(response => {
        this.roomsList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除工程管理系统-房屋信息编号为"' + ids + '"的数据项？').then(function () {
        return delRooms(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal.confirm('是否确认导出所有工程管理系统-房屋信息数据项？').then(() => {
        this.exportLoading = true;
        return exportRooms(queryParams);
      }).then(response => {
        this.$download.name(response.msg);
        this.exportLoading = false;
      }).catch(() => { });
    },
    // 初始化地图(后期可维护成组件)
    initMap() {
      proj4.defs('EPSG:990000', epsg9900.define);
      register(proj4);
      const projection = new Projection({
        code: "EPSG:990000",
        units: epsg9900.units,
        extent: epsg9900.extent
      });

      const tileSource = new XYZ({
        maxZoom: 8,
        minZoom: 0,
        projection: projection,
        transition: 0,
        tileGrid: new TileGrid({
          tileSize: 256,
          origin: epsg9900.origin,
          extent: epsg9900.extent,
          resolutions: epsg9900.tile_resolutions
        }),
        tileUrlFunction: (tileCoord) => {
          const z = "L" + this.zeroPad(tileCoord[0], 2, 10);
          const x = "C" + this.zeroPad(tileCoord[1], 8, 16);
          const y = "R" + this.zeroPad(tileCoord[2], 8, 16);
          return `${process.env.VUE_APP_BASEMAP}/Layers/_alllayers/${z}/${y}/${x}.png`;
        }
      })
      const baseLayer = new TileLayer({
        id: "base_layer_0",
        source: tileSource,
        wrapX: true
      });

      this.map = new Map({
        target: 'mapDiv',
        layers: [baseLayer],
        controls: olControl.defaults({
          zoom: false
        }),
        view: new View({
          projection: projection,
          center: epsg9900.center,
          zoom: 6,
          minZoom: 0,
          maxZoom: 12
        })
      });
    },
    zeroPad(num, len, radix) {
      let str = num.toString(radix || 10);
      while (str.length < len) {
        str = "0" + str;
      }
      return str;
    },
    updateMapView() {
      setTimeout(() => {
        if (this.map) {
          this.map.updateSize();
        }
      }, 300);
    },
    /**更多操作方法 */
    handleCommand(command, row) {
      switch (command) {
        case 'handleUpdate':
          this.$refs.edit.init(!row ? { id: this.ids[0] } : row)
          break;
        case 'handleDelete':
          this.handleDelete(row)
          break;
        case 'handleAdd':
          this.$refs.edit.init(row)
          break;

      }
    },
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: row;
  .table_box {
    width: 100%;
    // padding-right: 15px;
  }

  // #mapDiv {
  //   width: 50%;
  //   height: 100%;
  // }
}
</style>


// <style lang="scss" scoped>
// /* 弹窗样式 */
// .popup {
//   min-width: 350px;
//   position: relative;
//   background: #fff;
//   //   padding: 8px 16px;
//   display: flex;
//   flex-direction: row;
//   transform: translate(-50%, calc(-100% - 12px));
//   .text_info {
//     width: 30%;
//     height: 200px;
//     font-size: 14px;
//     ul {
//       list-style: none;
//       margin: 0px;
//       padding: 0px;
//     }
//   }
//   .img_info {
//     width: 70%;
//     height: 200px;
//     background: green;
//   }

//   /* 弹窗下方的小三角形 */
//   &::after {
//     display: block;
//     content: "";
//     width: 0;
//     height: 0;
//     position: absolute;
//     border: 12px solid transparent;
//     border-top-color: #fff;
//     bottom: -23px;
//     left: 50%;
//     transform: translateX(-50%);
//   }
// }
// /* 关闭弹窗按钮 */
// .icon-close {
//   cursor: pointer;
//   align-self: flex-end;
//   margin-bottom: 10px;
// }
//
</style>